<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>确认订单</title>
    <meta name="keywords" content="KEYWORDS..."/>
    <meta name="description" content="DESCRIPTION..."/>
    <meta name="author" content="DeathGhost"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name='apple-touch-fullscreen' content='yes'>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <link rel="icon" href="/1/images/icon/favicon.ico" type="image/x-icon">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/1/css/style.css"/>
    <script src="/1/js/jquery.js"></script>
    <script src="/vendor/layer/layer.js"></script>
    <script src="/js/jquery.cookie.js"></script>
    <script src="/js/vue.js"></script>
    <style>
        .address-wrapper{position:absolute;z-index:100;background-color:#eee;top:1rem;}
        .address-item{list-style:none;padding:.2rem;line-height:.4rem;border-bottom:1px solid #fefefe;}
        .addBtn{border-bottom:0;text-align:center;padding-top:.5rem;padding-bottom:.5rem;}
        .address-item.active{color:#06c1ae}
    </style>
</head>
<body>
<div id="app">
    <header>
        <a href="javascript:history.go(-1);" class="iconfont backIcon">&#60;</a>
        <h1>确认订单</h1>
    </header>
    <div style="height:1rem;"></div>
    <aside class="confirmAddr" @click="showAddressList">
        <p>
            <span>收货人：@{{ checkAddress.name }}</span>
            <span> @{{ checkAddress.mobile }}</span>
        </p>
        <address>@{{ checkAddress.province }}@{{ checkAddress.city }}@{{ checkAddress.district }}@{{ checkAddress.detail }}</address>
        <a class="iconfont">&#60;</a>
    </aside>
    <!--<dl class="payment">
     <dt>选择支付方式</dt>
     <dd>
      <label><input type="radio" name="pay"/>支付宝支付</label>
      <label><input type="radio" name="pay"/>微信支付</label>
     </dd>
    </dl>-->
    <section class="order_msg">
        <h2>我要留言</h2>
        <textarea placeholder="选填(亲可以在这里添加想说的话)" id="remark"></textarea>
    </section>
    <!--bottom nav-->
    <div style="height:1rem;"></div>
    <aside class="btmNav">
        <a style="background:#64ab5b;color:white;text-shadow:none;">合计：￥<span id="total-price">{{$totalMoney}}</span></a>
        <a style="background:#6bc75f;color:white;text-shadow:none;" onclick="doOrder()">提交订单</a>
    </aside>

    <div class="address-wrapper" v-show="showAddress">
        <ul>
            <li class="address-item" v-for="item in addressList" :class="{ active: item.is_default == 1 }" @click="setDefault(item.id)">
                @{{ item.name }} @{{ item.mobile }} @{{ item.province }}@{{ item.city }}@{{ item.district }}@{{ item.detail }}
            </li>
            <li class="address-item addBtn">
                <a href="/home/user/address">+ 新增收货地址</a>
            </li>
        </ul>
    </div>
</div>
<script>
    function doOrder() {
        layer.load(1, {shade: [0.2,'#999']});
        $.post('', {
            'address_id': app.checkAddress.id,
            remark: $('#remark').val(),
            openid: '{{$openid}}'
        }, function (res) {
            layer.closeAll();
            if (res.status === 1) {
                // 清空购物车
                $.removeCookie('cart_goods', {path: '/'});

                // 跳往主域名去支付
                location.href='{{$payUri}}&prepay_id=' + res.prepay_id;
            } else {
                layer.msg(res.info, {time: 2000});
            }
        });
    }

    var app = new Vue({
        el: '#app',
        data: {
            address_id: 1,
            showAddress: false,
            checkAddress: {},
            addressList: {!! $addressList !!}
        },
        methods: {
            setDefault: function (val) {
                this.addressList.map(function (item, index) {
                    if (item.id === val) {
                        app.addressList[index].is_default = 1;
                        app.checkAddress = item;
                    } else {
                        app.addressList[index].is_default = 0;
                    }
                });
                this.showAddress = false;
            },
            showAddressList: function () {
                this.showAddress = true;
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                app.addressList.map(function (item, index) {
                    if (item.is_default === 1)
                        app.checkAddress = app.addressList[index];
                });
            });
        }
    });
</script>
</body>
</html>
